<template>
  <el-dialog
    :title="title"
    :width="width"
    :show-close="showClose"
    :close-on-press-escape="false"
    :visible.sync="obj._visible"
    @close="closeClick"
  >
    <slot
      v-if="expandTitle"
      slot="title"
      name="title"
    ></slot>
    <slot></slot>
    <span slot="footer">
      <el-button
        v-if="cancelText"
        size="medium"
        @click="cancelClick"
      >{{cancelText}}</el-button>
      <el-button
        v-if="deleteText"
        type="danger"
        size="medium"
        @click="deleteClick"
      >{{deleteText}}</el-button>
      <el-button
        v-if="confimText"
        type="primary"
        size="medium"
        @click="confirmClick"
      >{{confimText}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name:"mm-dialog",
  props: {
    obj: {// InputObj
      type: Object,
      default: function () {
        return null;
      }
    },

    title: {// 对话框标题
      type: String,
      default: "提示"
    },

    confimText: {// 确定按钮的文字，null则不显示
      type: String,
      default: "确定"
    },

    cancelText: {// 取消按钮的文字，null则不显示
      type: String,
      default: "取消"
    },

    deleteText: {// 删除按钮的文字，null则不显示
      type: String,
      default: null // "删除"
    },

    width: {// 对话框宽度
      type: String,
      default: "60%"
    },

    showClose: {// 是否显示关闭按钮
      type: Boolean,
      default: true
    },

    expandTitle: {// 是否可以扩展标题
      type: Boolean,
      default: false
    }
  },

  methods: {
    confirmClick() {
      this.$emit("click", "confirm");
    },

    deleteClick() {
      this.$emit("click", "delete");
    },

    cancelClick() {
      this.obj._visible = false;
      // this.$emit("update:visible", false);
    },

    closeClick() {
      this.$emit("close", "delete");
    },
  }
}
</script>